<template>
  <div class="table-bar">
    <el-table :data="tableData" border style="width: 100%">
       <el-table-column
        type="selection"
        width="55"
        align="center">
      </el-table-column>
      
      <el-table-column  prop="id" label="编号" width="55" align="center">
      </el-table-column>

      <el-table-column label="商品图片" align="center">
        <template slot-scope="scope">
         <img :src="scope.row.pic" style="width:60px;height:50px">
        </template>
      </el-table-column>

      <el-table-column label="商品名称" width="200" align="center">
        <template slot-scope="scope">
         <p>{{scope.row.name}}</p>
         <p>品牌：{{scope.row.brandName}}</p>
        </template>
      </el-table-column>

      <el-table-column label="价格/货号" align="center">
        <template slot-scope="scope">
         <p>价格：￥{{scope.row.price}}</p>
         <p>货号：{{scope.row.productSn}}</p>
        </template>
      </el-table-column>

      <el-table-column label="标签" align="center">
        <template slot-scope="scope">
         <p>上架：
          <el-switch
            v-model="scope.row.publishStatus"
            active-color="#13ce66"
            inactive-color="#ccc"
            @change="publishStatusChange(scope.row)"
            >
          </el-switch>
         </p>
         <p>新品：
          <el-switch
            v-model="scope.row.newStatus"
            active-color="#13ce66"
            inactive-color="#ccc">
          </el-switch>
         </p>
         <p>推荐：
          <el-switch
            v-model="scope.row.previewStatus"
            active-color="#13ce66"
            inactive-color="#ccc">
          </el-switch>
         </p>
        </template>
      </el-table-column>

      <el-table-column label="排序" align="center">
        <template slot-scope="scope">
         <p>{{scope.row.sort}}</p>
        </template>
      </el-table-column>

      <el-table-column label="SKU库存" align="center">
        <template slot-scope="scope">
         <el-button 
         type="primary" 
         icon="el-icon-edit" 
         circle
         @click="getSKU(scope.row.id,scope.row.productSn)"
         >
         </el-button>
        </template>
      </el-table-column>   

      <el-table-column  prop="sale" label="销量" align="center">
      </el-table-column>      

      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
         <p>{{scope.row.verifyStatus == 1 ? '审核通过' : '未审核'}}</p>
         <p><a href="#">审核详情</a></p>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-row>
            <el-button>查看</el-button>
            <el-button>日志</el-button>
          </el-row>
          <el-row>
            <el-button>编辑</el-button>
            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
          </el-row>    
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑货品信息" :visible.sync="dialogTableVisible">
      <el-row>
        <el-col :span="6" class="dig-text">
          商品货号:{{proSn}}
        </el-col>
        <el-col :span='12'>
          <el-input placeholder="请输入内容" v-model="searchSn" class="input-with-select">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <el-table :data="skuList">
        <el-table-column property="skuCode" label="SKU编号"></el-table-column>
        <el-table-column property="spData[0].value" label="颜色"></el-table-column>
        <el-table-column property="spData[1].value" label="容量"></el-table-column>
        <el-table-column label="销售价格">
          <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="商品库存">
          <template slot-scope="scope">
              <el-input v-model="scope.row.stock"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存预警值">
          <template slot-scope="scope">
              <el-input v-model="scope.row.lowStock"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {changePubStu , getSKUList,delGoods} from "../../../api"

export default {
  name: "TableBar",
  props:{
    tableData:Array
  },
  data() {
    return {
      pubStu:{
        ids:[],
        publishStatus:1
      },
      skuList:[],
      proSn:"",
      dialogTableVisible:false,
      searchSn:"",
    }
  },
  methods:{
    publishStatusChange(v){
      this.pubStu.ids = []
      this.pubStu.ids.push(v.id)
      if(v.publishStatus){
        this.pubStu.publishStatus = 1
      }else{
        this.pubStu.publishStatus = 0
      }
      // 网络请求
      changePubStu(this.pubStu).then(res=>{
        console.log(res)
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    getSKU(id,sn){
      getSKUList(id).then(res => {
        res.data.data.forEach((item,index,arr) => {
          item.spData = JSON.parse(item.spData)
        })
        this.skuList = res.data.data
        this.proSn = sn
        this.dialogTableVisible = true
      })
    },
    del(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delGoods({
            deleteStatus:1,
            ids:[id]
          }).then((res)=> {
            console.log(res)
          }).catch(err => {
            this.$message.error(err.mesage)
          })
        }).catch(() => {});
    }
  }

};
</script>

<style scoped lang="less">
  /deep/.el-dialog__title{
    font-size: 30px;
  }
  .dig-text{
    font-size: 18px;
    line-height: 40px;
  }
</style>




